<template>
  <view class="wrap" v-if="showPage">
    <!-- <uv-navbar title="动态详情" autoBack placeholder></uv-navbar>
    <view class="video">
      <template v-if="isBuy">
        <view class="des">部分内容已隐藏，付费查看更多内容</view>
        <view class="pic">
          <image :src="setUrl(detail.video_image)" mode="aspectFill" class="img"></image>
        </view>
      </template>
      <template v-else>
        <template v-if="!play">
          <view class="pic">
            <image :src="setUrl(detail.video_image)" mode="aspectFill" class="img"></image>
          </view>
          <cover-image src="../../static/videoIcon.png" class="icon" @click="onPlay"></cover-image>
        </template>
        <template v-else>
          <video id="myVideo" class="videoFile" :src="setUrl(detail.video_file)" :enable-progress-gesture='false' :title='detail.title'></video>
        </template>
      </template>
    </view>
    <uv-tabs :list="tabs" :current='active' :scrollable='false' inactiveStyle='font-weight: 500; font-size: 30rpx; color: #737373;transition: all .3s;' activeStyle='font-weight: 500; font-size: 36rpx; color: #2B2B2B;transition: all .3s;' itemStyle='height: 90rpx;padding: 0;' lineColor='#E43222' lineWidth='36rpx' lineHeight='6rpx' @click="tabsClick"></uv-tabs>
    <template v-if="active == 0">
      <videoLeft :detail='detail'></videoLeft>
      <template v-if="!isBuy">
        <view class="share">
          <uv-divider text="分享至" lineColor='#EFEFEF' textSize='28rpx' textColor='#737373'></uv-divider>
        </view>
        <sharePage url='/pages/dynamic/videoDetail' title='我向你分享了一条动态，来看看吧！' type='news' :detail='detail' :pic="detail.images ? setUrl(detail.images.split(',')[0]) : ''"></sharePage>
      </template>
    </template>
    <template v-else>
      <view class="videoRight" v-if="!isBuy">
        <comment :list='list' type='news' @click="reply" v-if="list.length"></comment>
        <send type='news' :detail='detail' :focus='focus' :peoper='peoper' :ladder='ladder' :ids='id' @click="submit"></send>
      </view>
    </template>
    <view class="footer" v-if="isBuy">
      <view class="pox">
        <view class="left">
          <view>
            <view class="font">{{ detail.coin }}投研币</view>
            <view class="desc" v-if="detail.is_deduct">积分抵扣{{ Number(detail.money) }}投研币</view>
          </view>
          <button class="btn" hover-class="none" @click="goBuy">立即购买</button>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view> -->
    
    
    
    
    
    
    
    
    
    
    <!-- #ifdef WEB -->
    <uv-navbar title="动态详情" placeholder left-icon=""></uv-navbar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar title="动态详情" autoBack placeholder></uv-navbar>
    <!-- #endif -->
    <view class="video">
      <template v-if="isBuy">
        <view class="des">部分内容已隐藏，付费查看更多内容</view>
        <view class="pic">
          <image :src="setUrl(detail.video_image)" mode="aspectFill" class="img"></image>
        </view>
      </template>
      <template v-else>
        <template v-if="!play">
          <view class="pic">
            <image :src="setUrl(detail.video_image)" mode="aspectFill" class="img"></image>
          </view>
          <cover-image src="../../static/videoIcon.png" class="icon" @click="onPlay"></cover-image>
        </template>
        <template v-else>
          <video id="myVideo" class="videoFile" :src="setUrl(detail.video_file)" :enable-progress-gesture='false' :title='detail.title'></video>
        </template>
        {{setUrl(detail.video_file)}}
      </template>
    </view>
    <uv-tabs :list="tabs" :current='active' :scrollable='false' inactiveStyle='font-weight: 500; font-size: 30rpx; color: #737373;transition: all .3s;' activeStyle='font-weight: 500; font-size: 36rpx; color: #2B2B2B;transition: all .3s;' itemStyle='height: 90rpx;padding: 0;' lineColor='#E43222' lineWidth='36rpx' lineHeight='6rpx' @click="tabsClick"></uv-tabs>
    <template v-if="active == 0">
      <videoLeft :detail='detail'></videoLeft>
      <!-- #ifdef APP-PLUS -->
      <template v-if="!isBuy">
        <view class="share">
          <uv-divider text="分享至" lineColor='#EFEFEF' textSize='28rpx' textColor='#737373'></uv-divider>
        </view>
        <sharePage url='/pages/dynamic/videoDetail' title='我向你分享了一条动态，来看看吧！' type='news' :detail='detail' :pic="detail.images ? setUrl(detail.images.split(',')[0]) : ''"></sharePage>
      </template>
      <!-- #endif -->
    </template>
    <template v-else>
      <!-- #ifdef APP-PLUS -->
      <view class="videoRight" v-if="!isBuy">
        <comment :list='list' type='news' @click="reply" v-if="list.length"></comment>
        <send type='news' :detail='detail' :focus='focus' :peoper='peoper' :ladder='ladder' :ids='id' @click="submit"></send>
      </view>
      <!-- #endif -->
    </template>
    <!-- #ifdef WEB -->
    <view class="footer">
      <view class="pox">
        <button class="btn w100" hover-class="none" v-if="!isBuy" @click="goApp">
          请到APP查看
        </button>
        <view class="left" v-else>
          <view class="font">{{ detail.coin }}投研币</view>
          <button class="btn" hover-class="none" @click="goApp">去APP购买</button>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view class="footer" v-if="isBuy">
      <view class="pox">
        <view class="left">
          <view>
            <view class="font">{{ detail.coin }}投研币</view>
            <view class="desc" v-if="detail.is_deduct == 2">积分抵扣{{ Number(detail.money) }}投研币</view>
          </view>
          <button class="btn" hover-class="none" @click="goBuy">立即购买</button>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <!-- #endif -->
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import videoLeft from '../../components/dynamic/video/left.vue';
import sharePage from '../../components/share/page.vue';
import comment from '../../components/send/comment.vue';
import { ref, computed, nextTick } from 'vue';
import { post } from '@/api';
import { setUrl } from '@/common';
import { onLoad, onReady, onReachBottom, onShow } from '@dcloudio/uni-app';

let tabs = ref([
  {name: '简介'},
  {name: '评论(0)'}
])
let active = ref(0);
let id = '';
let detail = ref({});
let peoper = ref({});
let ladder = ref(0);
let focus = ref(false);
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let showPage = ref(false);
let videoContext = ref(null);
let play = ref(false);
const isBuy = computed(() => { // 收费且未购买
  return detail.value.is_charge == 2 && detail.value.is_buy == 0;
})

onLoad((option) =>{
  id = option.id;
  getData('frist');
})
onShow(() => {
  if(showPage.value){
    getData();
  }
})
onReady(() => {
  videoContext.value = uni.createVideoContext('myVideo')
})
// #ifdef APP-PLUS
// 上拉加载
onReachBottom(() => {
  if(active.value != 1) return;
  if(last_page < page || last_page == page) return;
  page++
  loading();
  getList();
  uni.hideLoading();
})
// #endif

function getData(value){
  post('api/news/getNewsInfo', { news_id: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      showPage.value = true;
      // #ifdef APP-PLUS
      if(value == 'frist') getList();
      const params = {
        type: 19,
        target_id: id
      }
      getAddScore(params, '每周阅读动态');
      // #endif
    }
  })
}
// 获取一级评论列表
function getList(){
  const params = {
    page,
    limit,
    news_id: id
  }
  post('api/news/newsCommentList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
      tabs.value[1].name = `评论(${list.value.length})`;
    }
  })
}
// 提交评论内容
function submit(){
  page = 1;
  list.value = [];
  getList();
  peoper.value = {}; //初始化用户回复行动
  ladder.value = 0;
}
function reply(row){
  peoper = row.peoper;
  ladder = row.ladder;
  focus.value = true;
}
async function onPlay(){
  if(isBuy.value) return;
  console.log('开始播放');
  play.value = true;
  await nextTick();
  videoContext.value.play();
}
function tabsClick(row){
  active.value = row.index;
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/dynamic/videoDetail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
function goBuy(){
  uni.navigateTo({
    url: `/pages/dynamic/cashier?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      width: 100%;
      .left{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .font{
          color: #e43222;
          font-size: 28rpx;
          font-weight: 500;
        }
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 8rpx;
        }
      }
      .btn{
        font-size: 34rpx;
        width: 360rpx;
        &.w100{
          width: 100%;
        }
      }
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #fff;
  }
  .videoRight{
    padding: 0 30rpx;
    padding-top: 20rpx;
  }
  .share{
    padding: 0 30rpx;
    padding-top: 40rpx;
  }
  .video{
    position: relative;
    width: 100%;
    .videoFile{
      width: 100%;
      height: 422rpx;
    }
    .des{
      font-weight: 400;
      font-size: 28rpx;
      color: #737373;
      background-color: #F5F5F5;
      border-radius: 10rpx;
      padding: 20rpx 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      text-align: center;
      z-index: 9;
    }
    .icon{
      width: 100rpx;
      height: 100rpx;
      font-size: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    .pic{
      width: 100%;
      height: 422rpx;
      border-radius: 10rpx;
      font-size: 0;
    }
  }
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
</style>